<template>
    <Popup
        v-model="visiable"
        position="bottom"
        :class="`tech-express-detail ${mode} ${styleMode}`"
        overlay-class="tech-express-detail-overlay"
        :close-on-click-overlay="false"
        @click-overlay="close"
    >
        <div class="express-content">
            <!-- 顶部 -->
            <div class="express-header">
                <div class="title">配送</div>
                <div class="close-action">
                    <MiniIcon name="close" :size="24" :mode="mode" :styleMode="styleMode" theme="#7D7D83" @click="close" />
                </div>
            </div>
            <div class="express-detail-info">
                <!-- 属性 -->
                <div class="express-item">
                    <div class="express-name"><MiniIcon name="deliverytakes" :size="20" :mode="mode" :styleMode="styleMode" theme="#000000" />门店自提</div>
                    <div class="express-tip">线上下单，门店提货，先人一步抢购好货</div>
                </div>
                <div class="express-item">
                    <div class="express-name"><MiniIcon name="takeout" :size="20" :mode="mode" :styleMode="styleMode" theme="#000000" />定时达</div>
                    <div class="express-tip">5-10公里/全城，2小时内准时送达，配送时间由您选择</div>
                </div>
                <div class="express-item">
                    <div class="express-name"><MiniIcon name="deliverytakes" :size="20" :mode="mode" :styleMode="styleMode" theme="#000000" />普通快递</div>
                    <div class="express-tip">极速发货，快递到家，给您便捷的购物体验</div>
                </div>
            </div>
            <div class="action-btn-container">
                <Button class="tech-btn" :style="themeBackround" :round="buttonRound" size="large" @click="close">我知道了</Button>
            </div>
        </div>
    </Popup>
</template>

<script>
import { Popup, Button } from 'vant';
import { MiniIcon } from '@components/base';
import logger from '@common/logger';

import ModeMixin from '@common/mixin';
export default {
    name: 'ExpressDetail', // 快递详情
    mixins: [ModeMixin],
    components: {
        Popup,
        Button,
        MiniIcon,
    },
    props: {
        havePickUp: Boolean,
        haveDayExpress: Boolean,
        haveNormalExpress: Boolean,
    },
    data() {
        return {
            visiable: false,
        };
    },
    methods: {
        show() {
            this.visiable = true;
        },
        close() {
            this.visiable = false;
        },
    },
};
</script>

<style lang="less">
.tech-express-detail {
    z-index: 2003 !important;
    box-sizing: border-box;
    overflow: hidden;
    height: 530px;
    height: calc(530px + constant(safe-area-inset-bottom));
    height: calc(530px + env(safe-area-inset-bottom));
    .style-mode-top();
    .mode-white();
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .express-header {
        height: 52px;
        .flex();
        align-items: center;
        justify-content: space-between;
        .p-h(@shop-gap-md);
        .title {
            font-size: 19px;
            font-weight: 500;
            color: @text-color;
        }
        .close-action {
            opacity: .7;
        }
    }
    .express-content {
        position: relative;
        height: 100%;
    }
    .express-detail-info {
        height: 305px;
        .scroll-y();
        .p(@shop-gap-md);
        .p-t(0);
        .express-item {
            .m-t(@gap-lg);
            .m-b(@gap-lg + @shop-gap-md);
            .express-name {
                font-size: @shop-font-size-md;
                font-weight: 500;
                color: @text-color;
                .flex();
                align-items: center;
                .mini-icon {
                    .m-r(3);
                }
            }
            .express-tip {
                color: @tip-color;
                font-size: @shop-font-size;
                .m-t(@gap-sm);
            }
        }
    }
    .action-btn-container {
        height: 75px;
        .flex-row-center();
        position: fixed;
        bottom: 0;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        left: 0;
        right: 0;
        .tech-btn {
            .m-h(@shop-gap-md);
            height: 45px;
            line-height: 45px;
        }
    }
}
.tech-express-detail-overlay {
    z-index: 2002 !important;
}
</style>
